{% load static %}
{% load cache %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="本网站(0318-SPACE)为博主的个人网站,用于博主的日常学习和分享,欢迎大家的访问!"/>
    <meta name="keywords" content="LLL 吕亮亮的博客  吕亮亮  www.lll.plus {% block keywords %}{% endblock %}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="{% static 'imgs/favorite.ico' %}" type="image/x-icon"/>
    <title>{% block title %}{% endblock %}</title>

    <!-- CSS only -->
    <link rel="stylesheet" type="text/css"
          href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'css/baseForIndexAndLearningPlanet.css' %}">
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>


</head>

<body id="container">

{% cache 60 'etra' %}
    {% include 'About.html' %}
    {% include 'addDesc_popMsg.html' %}
{% endcache %}

{% comment %}导航栏{% endcomment %}
<nav class="navbar navbar-expand-lg navbar-light bg-light container-fluid">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="navbar-brand" href="{% url 'app:index' %}">0318-SPACE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" id="AboutBu">关于</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#liuyan-box">留言</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'learningPlanet:index' blog_id=741 %}">关于博主</a>
            </li>
            <li class="nav-item">
                {% if LoginStatus %}
                    <a class="nav-link" href="{% url 'app:personalCenter' userId=userId %}">个人中心</a>
                {% else %}
                    <a class="nav-link" href="{% url 'app:login' %}">登录/注册</a>
                {% endif %}


            </li>
            <li class="nav-item">
                {% if isManage %}
                    <a class="nav-link"
                       href="{% url 'learningPlanet:modifyBlog' blog_id='add' author_id=userId %}">写博客</a>

                {% endif %}
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                   data-toggle="dropdown" aria-expanded="false">
                    星球
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'learningPlanet:index' blog_id=1 %}">学习星球</a>
                    <a class="dropdown-item" href="{% url 'playingPlanet:index' %}">快乐星球</a>
                    <a class="dropdown-item" href="#">元宇宙</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                   data-toggle="dropdown" aria-expanded="false">
                    歌单
                </a>
                <div class="dropdown-menu music-menu" aria-labelledby="navbarDropdown">
                    {% for music in music_list %}
                        <span class="dropdown-item" id="{{ music.file_path }}"
                              lang="{{ music.picture }}">{{ music.title }}</span>
                    {% endfor %}
                    <div class="dropdown-divider"></div>
                </div>
            </li>
            <li class="nav-item" id="music-box">
                <img id="current-music-img" role="status"
                     src="/media/music/Photograph/photograph.png">
                <audio controls class="nav-link" id="music-play" ontimeupdate="music_update();"
                       src="/media/music/Photograph/Ed%20Sheeran%20-%20Photograph.flac"></audio>
            </li>
            <li class="nav-item" id="current-music-box">
                <span class="nav-link my-hidden" id="current-music">photograph</span>
            </li>

        </ul>
        <div class="form-inline my-2 my-lg-0">
            <input id="keyword" class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="serach-btn">Search</button>
        </div>
    </div>
</nav>
{% comment %}导航栏end{% endcomment %}

<div class="row container-fluid">
    {% comment %}博客列表{% endcomment %}
    <ul id="blog-list" class="col-9">

        {% block left-content %}{% endblock %}

    </ul>

    {% comment %}博客列表end{% endcomment %}
    {% comment %}右边{% endcomment %}
    {#    {% cache 60 'content-base' %}#}
    <div class="col-3 my-hidden">
        {% comment %}热文排行榜{% endcomment %}
        <div id="topList" class="container-fluid shadow-lg">
            热文排行榜
            <div id="topOption" class="container-fluid">
                <span class="row-4 topOption">日热榜</span>
                <span class="row-4 topOption">周热榜</span>
                <span class="row-4 topOption">月热榜</span>
            </div>

            <table class="tableTop">
                <tbody>
                {% for foo in resTopDay %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="{% url 'learningPlanet:index' blog_id=foo.id %}"
                               class="post-enter">{{ foo.title }}</a></td>
                        <td>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fenlei-remen"></use>
                            </svg>
                            {{ foo.views }}</td>
                    </tr>


                {% endfor %}
                </tbody>
            </table>
            <table class="tableTop">
                <tbody>
                {% for foo in resTopWeek %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="{% url 'learningPlanet:index' blog_id=foo.id %}"
                               class="post-enter">{{ foo.title }}</a></td>
                        <td>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fenlei-remen"></use>
                            </svg>
                            {{ foo.views }}</td>
                    </tr>


                {% endfor %}
                </tbody>
            </table>
            <table class="tableTop">
                <tbody>
                {% for foo in resTopMonth %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td><a href="{% url 'learningPlanet:index' blog_id=foo.id %}"
                               class="post-enter">{{ foo.title }}</a></td>
                        <td>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fenlei-remen"></use>
                            </svg>
                            {{ foo.views }}</td>
                    </tr>


                {% endfor %}
                </tbody>
            </table>
        </div>

        {% comment %}热文排行榜end{% endcomment %}

        {% comment %}日历{% endcomment %}

        <div id="rili-box" class="container-fluid box shadow-lg" style="padding: 0;margin-top: 20px;">
            {% include '日历.html' %}
        </div>
        {% comment %}日历end{% endcomment %}

        <div id="tag-box" class="container-fluid box">
            标签
            <hr>
            {% for tag in tag_list %}
                <span class="rounded my-tag">{{ tag.title }}</span>
            {% endfor %}
        </div>

        <div id="recommend-box" class="container-fluid box">
            推荐
            <hr>
            {% for recommend in recommend_list %}

                <a href="{% url 'learningPlanet:index' blog_id=recommend.tilte_id %}"
                   class="post-enter">{{ recommend.tilte }}</a>

            {% endfor %}


        </div>

        <div id="category-box" class="container-fluid box">
            分类
            <hr>

            {% for category in category_list %}
                <span class="rounded my-tag">{{ category.title }}</span>
            {% endfor %}


        </div>

        <div id="liuyan-box" class="container-fluid box">
            留言
            <hr>

            {% for message in message_list %}
                <div class="each-liuyan-box">
                    <img src="../{{ message.avatar }}" alt="头像"
                         class="img-thumbnail rounded float-left">
                    <span>{{ message.name }}</span>({{ message.date }})：
                    <p>{{ message.content }}</p>
                </div>
                <br>
                <hr>
            {% endfor %}


            <textarea placeholder="欢迎留言评论，最多100字哦~" class="container-fluid" maxlength="100"
                      style="resize: none;height: 200px;"></textarea>
            <button class="btn btn-primary btn-lg btn-block">提交留言</button>
        </div>


    </div>
    {% comment %}右边end{% endcomment %}
</div>

{% include 'footer.html' %}


<style>
    #msg2 {
        position: fixed;
        right: 2%;
        top: 15%;
        width: 100px;
        display: inline-block;
        border: 2px solid red;
        text-align: center;
        color: red;
        font-weight: 600;
    }
</style>
<div id="msg2" style="z-index: 10000000!important;"></div>
<!-- JavaScript Bundle with Popper -->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script src="{% static 'js/tools.js' %}"></script>
{% comment %}icon font字体{% endcomment %}
<script src="../static/fonts/new_fonts/iconfont.js"></script>
<script>

    {% comment %}当窗口的宽度小于1400时需要隐藏的东西{% endcomment %}
    $(window).bind('load resize', function () {
        let win_width = document.body.offsetWidth || document.body.clientWidth;
        if (parseInt(win_width) > 1400) {
            $('.my-hidden').css('display', 'inline-block');
        } else {
            $('.my-hidden').css('display', 'none');
        }
        if (parseInt(win_width) < 970) {{% comment %}移动端{% endcomment %}
            $('.col-3').css('display', 'none');
            $('.col-9').addClass('col-12');
            $('.col-9').removeClass('col-9');
            $('#music-play').addClass('per-100');
            $('#music-box img').addClass('right-0');
        } else {
            $('.col-3').css('display', 'inline-block');
            $('.col-12').addClass('col-9');
            $('.col-12').removeClass('col-12');
            $('#music-play').removeClass('per-100');
            $('#music-box img').removeClass('right-0');
        }

    });

    {% comment %}功能函数{% endcomment %}
    {% comment %}搜索{% endcomment %}

    function do_search(keyword) {
        if (keyword.length) {
            $ajax('post', "{% url 'learningPlanet:search' %}", {'keyword': keyword}, function (msg) {
                    let blog_list = JSON.parse(msg)['data'];
                    if (blog_list.length > 0) {
                        let Str = ``;
                        for (let i = 0; i < blog_list.length; i++) {
                            Str += `<li class="container-fluid shadow-none p-3 mb-5 rounded"><div class="post-top container-fluid">
<h4 class="title">${blog_list[i].title}</h4> <span class="date"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-riqi"></use></svg>:${blog_list[i].createdTime}</span></div><div class="post-bottom"><div class="post-img" style='background-image: url(${blog_list[i].background})'></div><div class="content-ri"><div class="content-ri-top container-fluid"><p>${blog_list[i].summary}</p></div><div class="content-ri-bottom container-fluid"><span><a href="{% url 'learningPlanet:index' blog_id='' %}${blog_list[i].blogId}" class="post-enter">阅读原文>></a></span>
<span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yonghu"></use></svg>${blog_list[i].author}</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liulan-5"></use></svg>${blog_list[i].views}</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon_pinglun"></use></svg>${blog_list[i].total_judge}</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yishoucang"></use></svg>${blog_list[i].total_collect}</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>${blog_list[i].likes}</span></div></div></div></li>`;
                        }
                        $('#blog-list').html(Str);

                        let keyword_box = document.getElementById('keyword');
                        keyword_box.value = '';
                        keyword_box.placeholder = `关键词:${keyword},搜索到${blog_list.length}篇`;
                        hover_li();
                    } else {
                        let keyword_box = document.getElementById('keyword');
                        keyword_box.value = '';
                        keyword_box.placeholder = `关键词${keyword},无相关内容`;
                    }
                },
                function () {
                    let msgbox = $('#msg2');
                    msgbox.hide();
                    popMsg2('请求失败。');
                })
        }
    }

    {% comment %}鼠标划过特效{% endcomment %}

    function hover_li() {
        let post_li_list = $('#blog-list>li');
        for (let i = 0; i < post_li_list.length; i++) {
            post_li_list[i].style.position = 'relative';
        }
        post_li_list.mouseenter(function () {
            this.className = 'container-fluid shadow-lg p-3 mb-5 bg-white rounded';
            perfectMove(this, {
                top: -10
            })
            this.style.top = '-10px';

        });
        post_li_list.mouseleave(function () {
            this.className = 'container-fluid shadow-none p-3 mb-5  rounded';
            perfectMove(this, {
                top: 10
            })
        });
    }

    {% comment %}信息弹出框{% endcomment %}

    function popMsg2(msg) {
        let msgbox = $('#msg2');
        msgbox.text(msg);
        msgbox.fadeIn(500);
        setTimeout(function () {
            msgbox.fadeOut(500);
        }, 1000);
    }

    {% comment %}留言{% endcomment %}

    function liuyan() {
        let msgbox = $('#msg2');
        msgbox.hide();
        {% comment %}提交留言{% endcomment %}
        let textarea_box = $('#liuyan-box textarea');
        let liuyan_btn = $('#liuyan-box button');
        liuyan_btn.click(function () {
            let content = textarea_box.val();
            if (content.length > 1) {
                {% comment %}发送给后台{% endcomment %}
                $ajax('post', "{% url 'app:savemessage' %}", {'userId': "{{ userId }}", 'content': content},
                    function (msg) {
                        let data = JSON.parse(msg);
                        let name = data['name'];
                        let content = data['content'];
                        let avatar = data['avatar'];
                        let date = data['date'];

                        $('#liuyan-box textarea').before(`<div class="each-liuyan-box"><img src="{% url 'app:index' %}${avatar} " alt="头像" class="img-thumbnail rounded float-left"><span>${name}</span>(${date})<p>${content}</p></div><br><hr>`);
                        textarea_box.val('');
                    },
                    function (msg) {

                    }
                )
            } else {
                popMsg2('至少写两个字吧！');
            }
        });

        textarea_box.focus(function () {
            if ('{{ LoginStatus }}' !== 'true') {
                popMsg2('请先登录吧！');
                textarea_box.blur();
                {% comment %}失去焦点{% endcomment %}
            }


        });
    }

    {% comment %}切换热门排行榜{% endcomment %}

    function switch_top() {
        let topOptions = document.getElementsByClassName('topOption');
        let tableTops = document.getElementsByClassName('tableTop');
        for (let k = 0; k < topOptions.length; k++) {
            topOptions[k].onclick = function () {
                //所有table都不显示
                for (let i = 0; i < tableTops.length; i++) {
                    tableTops[i].style.display = 'none';
                    topOptions[i].style.backgroundColor = 'transparent';
                }
                //显示选中的table
                tableTops[k].style.display = 'block';
                topOptions[k].style.backgroundColor = '#98fb98';
            }

        }
        topOptions[0].click();
    }

    {% comment %}功能函数end{% endcomment %}

    {% comment %}音乐播放{% endcomment %}
    var music_player = document.getElementById('music-play');
    var current_music_img = document.getElementById('current-music-img');

    function music_update() {
        $.cookie('current_music_src', music_player.src, {expires: 7, path: '/'});
        $.cookie('current_music_pos', music_player.currentTime, {expires: 7, path: '/'});
        $.cookie('current_music_img', current_music_img.src, {expires: 7, path: '/'});
    }

    $(function () {

        {% comment %}音乐断点重播：首先检查cookie中的记录{% endcomment %}
        let music_src = $.cookie('current_music_src');
        let music_status = $.cookie('music_status');
        if (music_status === '1') {
            current_music_img.src = $.cookie('current_music_img');
            music_player.src = music_src;
            music_player.currentTime = $.cookie('current_music_pos');
            music_player.play();
        }


        {% comment %}鼠标划过特效{% endcomment %}
        hover_li();

        let music_player_jq = $('#music-play');
        music_player_jq.bind('ended', function () {
            {% comment %}下一首随机播放{% endcomment %}
            $('.music-menu .dropdown-item')[getRndInteger(0, $('.music-menu .dropdown-item').length - 1)].click();
        });
        music_player_jq.bind('pause', function () { {% comment %}歌曲暂停，图片停止旋转{% endcomment %}
            $('#music-box img').removeClass('spinner-border');
            $.cookie('music_status', '0', {expires: 7, path: '/'});
        });
        music_player_jq.bind('play', function () {
            $('#music-box img').addClass('spinner-border');
            $.cookie('music_status', '1', {expires: 7, path: '/'});


        });
        {% comment %}切换歌曲{% endcomment %}
        $('.music-menu .dropdown-item').click(function () {
            $('#current-music').text(this.innerText);
            $('#music-play').attr('src', "../media/" + this.id);
            $('#current-music-img').attr('src', '../media/' + this.lang);
            music_player_jq[0].play();

        });

        {% comment %}搜索{% endcomment %}
        $('#serach-btn').click(
            function () {
                let keyword = $('#keyword').val();
                do_search(keyword);
            }
        );
        {% comment %}搜索end{% endcomment %}
        {% comment %}点击标签显示相应内容{% endcomment %}
        $('.my-tag').click(function () {
            do_search(this.innerText);
        });
        {% comment %}点击标签显示相应内容end{% endcomment %}

        {% comment %}热文排行榜的点击切换功能{% endcomment %}
        switch_top();
        {% comment %}热文排行榜的点击切换功能end{% endcomment %}

        {% comment %}留言{% endcomment %}
        liuyan();
        {% comment %}留言end{% endcomment %}
    });
</script>
<!-- 导入模型的脚本文件 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
    L2Dwidget.init({
        // 引用的模型
        "model": {
            //jsonPath: "https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json",
            //jsonPath: "https://unpkg.com/live2d-widget-model-hibiki@1.0.5/assets/hibiki.model.json",
            jsonPath: "https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-izumi@1.0.5/assets/izumi.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-ni-j@1.0.5/assets/ni-j.model.json",
            //jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-tsumiki@1.0.5/assets/tsumiki.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-unitychan@1.0.5/assets/unitychan.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nico@1.0.5/assets/nico.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nipsilon@1.0.5/assets/nipsilon.model.json",
            // jsonPath: "https://unpkg.com/live2d-widget-model-nito@1.0.5/assets/nito.model.json",
            //jsonPath: "https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json",

            "scale": 1
        },
        // 模型的样式，可以自行更改
        "display": {
            "position": "right",
            "width": 150,
            "height": 300,
            "hOffset": -30,
            "vOffset": -120
        },
        "mobile": {
            "show": true,
            "scale": 0.5
        },
        "react": {
            "opacityDefault": 1,
            "opacityOnHover": 0.5
        }
    });
</script>
{#    {% endcache %}#}


</body>

</html>